<template>
  <div class="efficdiv" :style="efficstyless" v-if="ifeffic">
    <div style="" class="efficdivsel">
      <el-select
        v-model="selected"
        placeholder
        @change="selchange"
        :popper-append-to-body="true"
      >
        <el-option
          v-for="item in selectopt"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import axios from "@/utils/requestzz";
import defaultmixins from "@/mixins/bigScreen/defaultmixins";

//能效图组件

export default {
  name: "efficiency",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      selectopt: [
        { name: "二次供回平均温度", code: "m_019t_1" },
        { name: "一次供回压差", code: "m_003p" },
        { name: "一次供水压力", code: "m_001p" },
        { name: "一次供水温度", code: "m_001t" },
        { name: "一次回水温度", code: "m_002t" },
        { name: "二次供水温度", code: "m_004t_1" },
        { name: "单耗", code: "m_003qc" },
      ],

      colors: [
        "#E70012",
        "#F3602C",
        "#F39801",
        "#F8B62C",
        "#F9EE00",
        "#DAE000",
        "#A7D131",
        "#3CC573",
        "#52EBE9",
        "#017BE8",
      ],

      selected: "",
      g_areaData: [],
      config_data: "",
    };
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    },
    ifeffic: function () {
      return this.$store.state.daping.scencetype == "nengxiao";
    },
  },
  watch: {
    selected: {
      handler: function (n, o) {
        this.loadeffic(n);
      },
    },
    "$store.state.daping.scencetype": {
      handler: function (n, o) {
        if (this.$store.state.daping.scencetype == "nengxiao") {
          this.selected = "m_019t_1";
        }
      },
    },
  },
  mounted() {},
  methods: {
    getunit(n) {
      var min = 0,
        step = 0,
        section = 10; //section默认为10

      var varObj = this.config_data[n];
      let color = varObj["color"];
      min = varObj["minValue"];
      step = varObj["step"];
      let rangeArr = [];
      var toFixedLength = this.calcToFixedLength(min, step);

      for (var i = 0; i < section - 1; i++) {
        var range = (min + step * i).toFixed(toFixedLength);
        rangeArr.push(range);
      }
      rangeArr.reverse();

      this.$store.state.daping.efficiency.colors = color.split("@@");
      this.$store.state.daping.efficiency.colorvalmap = rangeArr;
      this.$store.state.daping.efficiency.type = n;
    },

    calcToFixedLength(a, b) {
      //计算两个数值a和b 小数点后有几位 并且返回结果最长的那个
      a = a.toString();
      b = b.toString();

      var aPoint = a.indexOf("."); //小数点的位置
      var bPoint = b.indexOf(".");
      var aNum = 0; //小数的位数
      var bNum = 0;

      if (aPoint != -1) {
        aNum = a.length - aPoint - 1;
      }
      if (bPoint != -1) {
        bNum = b.length - bPoint - 1;
      }
      if (aNum >= bNum) {
        return aNum;
      } else {
        return bNum;
      }
    },

    getconfig(n) {
      axios.get("/heatmap/queryConfig").then((res) => {
        this.config_data = res.data;
        this.loadeffic(n);
      });
    },
    selchange(n) {
      // this.selected = n
    },
    loadeffic(n) {
      //是否为热单耗
      let param = n;
      let g_data_arr = [];
      var g_intervalFlag;

      if (this.config_data == "") {
        this.getconfig(n);
      } else {
        if (param == "m_003qc") {
          if (this.g_areaData.length == 0) {
            axios
              .post("/model/stations?from=daping&needMap=true")
              .then((res) => {
                this.g_areaData = res.data["200"];
                this.loaddanhao(param);
              });
          } else {
            this.loaddanhao(param);
          }
        } else {
          this.loaddanhao(param);
        }
      }
    },
    loaddanhao(param) {
      let retMap = [];
      let g_data_arr = [];
      var g_intervalFlag;

      let queryJson = {
        queries: [
          {
            metric: "pid,name," + param,
            schema: "monitor",
          },
        ],
        table: "SubStation",
        needMap: true,
      };

      if (this.ishistory == "历史") {
        queryJson = {
          queries: [
            {
              metric: "pid,name," + param,
              schema: "monitor",
            },
          ],
          table: "SubStation",
          type: "history",
          needMap: true,
          startTime: this.timerangarr[0].getTime(),
          endTime: this.timerangarr[1].getTime(),
        };
      }

      axios.post("/open/queryDb", queryJson).then((res) => {
        if (param !== "m_003qc") {
          //不是单耗
          retMap = res.data["200"];
          //设置三个
          this.getunit(param);
          this.$store.state.daping.efficiency.g_data_arr = retMap;

          g_data_arr.push(retMap);
        } else {
          retMap = res.data["200"];
          for (var i in retMap) {
            var m_003qc = (retMap[i]["m_003qc"] / 3.6) * 1000000;
            var area = this.g_areaData[i]
              ? this.g_areaData[i]["heatingArea"]
              : null;
            if (area) {
              //null or undefined or 0
              var unitConsumption = Number(m_003qc / area).toFixed(2);
              retMap[i]["m_003qc"] = unitConsumption;
            } else {
              retMap[i]["m_003qc"] = 0;
            }
          }
          g_data_arr.push(retMap);
        }
      });
    },
  },
};
</script>
<style lang='scss'>

.efficdivsel{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 100%;
}
.efficdiv {
  height: 100%;
  .el-input__inner {
    background-color: #409eff55;
    border-color: #409eff99;
    color: #fff;
  }
  .el-select-dropdown__item {
    color: white;
    background-color: #5555;
  }

  .el-select-dropdown__wrap {
    background-color: #5555;
    color: white;
  }

  .el-select .el-input .el-select__caret {
    color: #c0c4cc;
  }
}
.efficdiv11 {
  // .el-input__inner {
  //   background-color: #409eff55;
  //   border-color: #409eff99;
  //   border-radius: var(--px14i);
  //   color: #fff;
  //   height: var(--px138i);
  //   line-height: var(--px138i);
  //   padding: var(--px048i);
  //   font-size: var(--px48i);
  // }

  // .el-select-dropdown__item {
  //   font-size: var(--px48i);
  //   padding: var(--px069i);
  //   color: white;
  //   background-color: #5555;
  //   height: var(--px117i);
  //   line-height: var(--px117i);
  // }

  // .el-select-dropdown__wrap {
  //   max-height: var(--px945i);
  //   background-color: #5555;
  //   color: white;
  // }

  // .el-select .el-input .el-select__caret {
  //   color: #c0c4cc;
  //   font-size: var(--px48i);
  // }
}
</style>